// Utilities
// -------------------------
$z-layers: (
		"default": 1,
		"below": -1,
		"max": 10000,
		"bar": (
				"bar": 10,
				"btn": 20,
				"icon": 20
		),
		"backdrop": 998,
		"modal": 999,
		"popover":(
				"popover": 999,
				"arrow": 1000,
		),
		"scroll": (
				"scrollbar": 9998,
		),
		"toast": 9999,
);
@function map-has-nested-keys($map, $keys...) {
	@each $key in $keys {
		@if not map-has-key($map, $key) {
			@return false;
		}
		$map: map-get($map, $key);
	}

	@return true;
}

@function map-deep-get($map, $keys...) {
	@each $key in $keys {
		$map: map-get($map, $key);
	}

	@return $map;
}

@function z($layers...) {
	@if not map-has-nested-keys($z-layers, $layers...) {
		@warn "No layer found for `#{inspect($layers...)}` in $z-layers map. Property omitted.";
	}

	@return map-deep-get($z-layers, $layers...);
}

// Clearfix
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
@mixin clearfix() {
	&:after {
		height: 0;
		content: " ";
		clear: both;
		display: block;
		visibility: hidden;
	}
}

@mixin hairline($type, $color, $offset) {
	@if $type == all or $type == after {
		&:after {
			position: absolute;
			left: $offset;
			right: 0;
			bottom: 0;
			height: 1px;
			background-color: $color;
			content: '';
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
		}
	}

	@if $type == all  or $type == before {
		&:before {
			position: absolute;
			left: $offset;
			right: 0;
			top: 0;
			height: 1px;
			background-color: $color;
			content: '';
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
		}
	}
}

//button
@mixin btn($color) {
	color: #fff;
	background-color: $color;
	border: 1px solid $color;

	&:enabled:active,
	&.#{$namespace}active:enabled {
		color: #fff;
		background-color: darken($color, 10%);
		border: 1px solid darken($color, 10%);
	}
}

// lineText
@mixin line-text($line) {
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: $line;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}
